<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header" />
<body>
<!--导航-->
<div class="login">
    <div class="message">注册</div>
    <div id="darkbannerwrap"></div>
	<input id="loginName" name="loginName" placeholder="邮箱" required="" type="text">
	<hr class="hr15">
	<input id="nick" name="nick" placeholder="昵称" required="" type="text">
	<hr class="hr15">
	<span>头像</span>
	<div class="head-img" style="margin: 10px 50px;">
		<div class="head-img" style="position: relative">
			<img id="headImgBase64" src="" style="z-index:2; position: absolute" class="head-img" />
			<span style="z-index: 1;position: absolute; top: 50px; width: 100px; line-height: 20px;text-align: center;">上传头像</span>
			<input id="headImg" style="position: absolute;z-index: 3;width: 100px; height: 100px; border: none; outline: none;opacity: 0;cursor: pointer;" class="head-img-file head-img" type="file" onchange="readImg()"/>
		</div>
	</div>
	<input id="password" name="password" placeholder="密码" required="" type="password">
	<hr class="hr15">
	<input id="confirmPassword" name="confirmPassword" placeholder="确认密码" required="" type="password">
	<hr class="hr15">
	<input id="register" value="下一步" style="width:100%;" type="submit">
	<hr class="hr20">
	 已有帐号? <a href="/login">立即前往登录</a>
</div>
</body>
<link th:href="@{/resources/css/login.css}" type="text/css" rel="stylesheet">
<style type="text/css">
	.head-img {width: 100px; height: 100px; border-radius: 100px; border: 1px solid #b4b4b4;}
</style>
<script>

    function isEmail(str){
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        return reg.test(str);
    }

    function verify() {
        var loginName = $('#loginName').val();
        var password = $('#password').val();
        var confirmPassword = $('#confirmPassword').val();
        if(!isEmail(loginName)) {
            winTip('邮箱地址不正确！', false);
            return false;
		}
        if(isEmpty($('#nick').val())) {
            winTip('请填写昵称！', false);
            return false;
		}
        if($('#headImgBase64').attr('src').lastIndexOf("data:image") == -1) {
            winTip("请上传头像！", false);
            return false;
        }
        if( !(password.length>=8 && password.length<=20 && confirmPassword.length>=8 && confirmPassword.length<=20) ) {
            winTip('密码在【8-20】之间！', false);
            return false;
        }
		if( !(password==confirmPassword) ) {
            winTip('密码不匹配！', false);
            return false;
        }
		return true;
    }
	
	$('#register').click(function () {
        //验证
        if(verify()) {
            var user = {
                "loginName": $('#loginName').val(),
                "password": $('#password').val(),
				"nick":$('#nick').val(),
				"headImg":$("#headImgBase64").attr('src')
            };
            loading("请稍等，正在注册!");
            $.post("/sendActivateCode", user, function (data) {
                closeLoading();
				if (data.code == 1) {
					location.href = "/registerActivate";
				} else if (data.code == 2) {
                    winTip('用户名已经存在！请前往登录！', false);
				} else {
                    winTip('获取激活码失败！请重新获取！', false);
				}
			});
        }
    });

    function readImg() {
        var read = new FileReader();
        var file = $("#headImg")[0].files[0];
        var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";
        //（把路径中的所有字母全部转换为小写
        var url = $("#headImg").val();
        var extName = url.substring(url.lastIndexOf(".")).toLowerCase();
        if(AllImgExt.indexOf(extName+"|")==-1)
        {
            ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
            $.messager.alert('温馨提示',ErrMsg);
            return false;
        }
        read.readAsDataURL(file);
        read.onload = function(e) {
            var data = read.result;
            $("#headImgBase64").attr('src', data);
        }
    }
</script>
</html>